<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入 Vue.js 库 -->
    <script src="js/vue.js"></script>
    <!-- 引入 Element UI 库 -->
    <script src="js/elementui.js"></script>
    <!-- 引入 Axios 库用于 HTTP 请求 -->
    <script src="js/axios.js"></script>
    <!-- 引入自定义的 common.js 文件 -->
    <script src="js/common.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="app">
        <!-- 使用 Vue 模板语法渲染页面内容 -->
        <template>
            <!-- 标题栏，包含搜索输入框和按钮 -->
            <h1 style="text-align: center;">
                菜单维护
                <!-- 输入框用于搜索菜单 -->
                <el-input v-model="menuname" style="width: 250px;" placeholder="请输入内容"></el-input>
                <!-- 搜索按钮，点击后调用 initTreeData 方法 -->
                <el-button type="primary" @click="initTreeData()">搜索菜单</el-button>
            </h1>
            <!-- 表格组件，显示菜单列表 -->
            <el-table header-align="center" :data="tableData" border style="width: 100%">
                <!-- 列表列定义 -->
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="label" label="菜单名" width="180"></el-table-column>
                <el-table-column prop="href" label="菜单路径"></el-table-column>
                <el-table-column prop="parentid" label="上级 ID"></el-table-column>
                <!-- 小图标照片列 -->
                <el-table-column label="小图标照片">
                    <template slot-scope="scope">
                        <!-- 动态绑定图标类名 -->
                        <i :class="scope.row.imgicon"></i>
                    </template>
                </el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作">
                    <template slot="header" slot-scope="scope">
                        <!-- 新增菜单按钮 -->
                        <el-button type="primary" @click="handleAddmenu(scope.$index, scope.row)">新增</el-button>
                    </template>
                    <template slot-scope="scope">
                        <!-- 编辑按钮，点击后调用 handleEdit 方法 -->
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <!-- 删除按钮，点击后调用 handleDelete 方法 -->
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        <!-- 新增下级菜单按钮，点击后调用 handleadd 方法 -->
                        <el-button size="mini" type="primary" @click="handleadd(scope.$index, scope.row)">新增</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 修改菜单对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <!-- 表单组件 -->
            <el-form :model="Datafrom">
                <!-- 菜单名列 -->
                <el-form-item label="菜单名">
                    <el-input v-model="Datafrom.label" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 菜单路径列 -->
                <el-form-item label="菜单路径">
                    <el-input v-model="Datafrom.href" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 小图标照片列 -->
                <el-form-item label="小图标照片">
                    <el-input v-model="Datafrom.imgicon" placeholder="可以不填" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <!-- 对话框底部按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新增菜单对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisibleAdd" width="40%">
            <!-- 表单组件 -->
            <el-form :model="Datafrom" label-width="80px">
                <!-- 菜单名称列 -->
                <el-form-item label="菜单名称">
                    <el-input v-model="Datafrom.label" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 链接地址列 -->
                <el-form-item label="链接地址">
                    <el-input v-model="Datafrom.href" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 图标选择列 -->
                <el-form-item label="图标">
                    <!-- 动态显示选中的图标 -->
                    <i :class="Datafrom.imgicon"></i>
                    <!-- 输入框用于手动输入图标类名 -->
                    <!-- <el-input v-model="Datafrom.imgicon" autocomplete="off"></el-input> -->
                    <!-- 下拉选择器用于选择图标 -->
                    <el-select v-model="Datafrom.imgicon" placeholder="请选择图标">
                        <el-option v-for="item in imgicon" :value="item.value">
                            <i :class="item.value"></i>&nbsp;&nbsp;&nbsp;  {{item.label}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 所属父级列 -->
                <el-form-item label="所属父级">
                    <!-- 级联选择器用于选择父级菜单 -->
                    <el-cascader :props="parentidProps" v-model="Datafrom.parentid" :show-all-levels="false"
                        :options="parentidOptions" :value="parentidOptions.parentid"></el-cascader>
                </el-form-item>
            </el-form>
            <!-- 对话框底部按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改菜单对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisibleUp" width="40%">
            <!-- 表单组件 -->
            <el-form :model="formUp" label-width="80px">
                <!-- 菜单名称列 -->
                <el-form-item label="菜单名称">
                    <el-input v-model="formUp.label" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 链接地址列 -->
                <el-form-item label="链接地址">
                    <el-input v-model="formUp.href" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 图标选择列 -->
                <el-form-item label="图标">
                    <!-- 动态显示选中的图标 -->
                    <i :class="formUp.imgicon"></i>
                    <!-- 输入框用于手动输入图标类名 -->
                    <!-- <el-input v-model="formUp.imgicon" autocomplete="off"></el-input> -->
                    <!-- 下拉选择器用于选择图标 -->
                    <el-select v-model="formUp.imgicon" placeholder="请选择图标">
                        <el-option v-for="item in imgicon" :value="item.value">
                            <i :class="item.value"></i> &nbsp;&nbsp;&nbsp; {{item.label}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 所属父级列 -->
                <el-form-item label="所属父级">
                    <!-- 级联选择器用于选择父级菜单 -->
                    <el-cascader :props="parentidProps" v-model="formUp.parentid" :show-all-levels="false"
                        :options="parentidOptions" :value="parentidOptions.parentid"></el-cascader>
                </el-form-item>
            </el-form>
            <!-- 对话框底部按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleUp = false">取 消</el-button>
                <el-button type="primary" @click="upd()">确 定</el-button>
            </div>
        </el-dialog>
        
    </div>
</body>
<script>
    // 创建 Vue 实例
    new Vue({
        el: "#app",
        data: {
            // 图标选项数组
            imgicon: [
                { "label": "饿了么", "value": "el-icon-platform-eleme" },
                { "label": "删除", "value": "el-icon-delete" },
                { "label": "笔画", "value": "el-icon-edit" },
                { "label": "分享", "value": "el-icon-share" },
                { "label": "电话", "value": "el-icon-phone-outline" },
                { "label": "更多", "value": "el-icon-more" },
                { "label": "放大", "value": "el-icon-zoom-in" },
                { "label": "收藏", "value": "el-icon-star-on" },
            ],
            // 对话框标题
            title: "",
            // 控制修改菜单对话框的显示状态
            dialogFormVisible: false,
            // 表格数据
            tableData: [],
            //修改的数据
            formUp: {
                href: null,
                id: 0,
                imgicon: null,
                label: "",
                parentid: 0
            },
            // 表单数据对象
            Datafrom: {
                href: null,
                id: 0,
                imgicon: null,
                label: "",
                parentid: ""
            },
            // 新增菜单表单数据对象
            formadd: {
                href: null,
                id: 0,
                imgicon: null,
                label: "",
                parentid: 0
            },
            // 级联选择器配置
            parentidProps: {
                value: "id",
                emitPath: false,
                checkStrictly:true
            },
            // 控制新增菜单对话框的显示状态
            dialogFormVisibleAdd: false,
            dialogFormVisibleUp: false,
            // 级联选择器选项数据
            parentidOptions: [],
            // 搜索菜单名称
            menuname: ""
        },
        methods: {
            // 初始化菜单数据
            initTreeData() {
                axios.get(API + 'selectallmenu?menuname=' + this.menuname).then(res => {
                    console.log(res);
                    this.tableData = res.data.data.menus;
                })
            },
            upd(){
                console.log(this.formUp);
                axios.post(API + 'updatemenu', this.formUp).then(res => {
                        if (res.data.data.b) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.$nextTick(() => {
                                this.initTreeData()
                            })
                        } else {
                            this.$message.error('修改失败');
                        }
                    })
                this.dialogFormVisibleUp=false
            },
            // 处理编辑操作
            handleEdit(index, row) {
                console.log("编辑", index, row);
                // this.$router.push({
                //     path: '/menuList',
                //     query: {
                //         id: row.id
                //     }
                // })
            },
            // 处理删除操作
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(index, row);
                    axios.post(API + 'deletemenu?id=' + row.id).then(res => {
                        if (res.data.data.b) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('删除失败');
                        }
                        // 异步刷新
                        this.$nextTick(() => {
                            this.initTreeData()
                        })
                    })
                });
            },
            // 处理新增下级菜单操作
            handleadd(index, row) {
                this.title = "新增下级菜单";
                this.dialogFormVisible = true;
                this.Datafrom = {
                    href: null,
                    id: 0,
                    imgicon: null,
                    label: "",
                    parentid: row.id
                };
            },
            // 处理编辑菜单操作
            handleEdit(index, row) {
                this.selectAllMenu()//先填充父级菜单下拉列表
                this.title = "修改菜单";
                this.dialogFormVisibleUp = true;
                axios.get(API + 'selectmenuId?id=' + row.id).then(res => {
                    console.log(res);
                    this.formUp = res.data.data.menu;
                })
            },
            selectAllMenu() {//获取所有的菜单数据，填充父级菜单下拉列表
                //获取所有的菜单集合
                axios.get(API + 'selectallmenu?menuname=' + this.menuname).then(res => {
                    this.parentidOptions = arrayToTree(res.data.data.menus);
                })
            },
            // 提交表单操作
            add() {
                    axios.post(API + 'addmenu', this.Datafrom).then(res => {
                        if (res.data.data.b) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.$nextTick(() => {
                                this.initTreeData()
                            })
                            this.dialogFormVisibleAdd = false
                        } else {
                            this.$message.error('添加失败');
                        }
                    })
            },
            // 处理新增菜单操作
            handleAddmenu(index, row) {
                this.title = "添加菜单"
                this.dialogFormVisibleAdd = true;
                this.Datafrom = {
                    href: null,
                    id: 0,
                    imgicon: null,
                    label: "",
                    parentid: 0
                };
                this.selectAllMenu()
            }
        },
        // Vue 生命周期钩子函数，在挂载完成后执行
        mounted() {
            this.initTreeData(); // 初始化获取树的数据

        }
    })
</script>

</html>